<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
        :default-active="defaultMenu"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#222832"
        text-color="#fff"
        router="ture"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>首页配置</span>
          </template>
          <el-menu-item index="/home/rotation">
            <el-icon><picture-filled /></el-icon>
            <span>轮播图配置</span>
          </el-menu-item>
          <el-menu-item index="/home/hot">
            <el-icon><star-filled /></el-icon>
            <span>热销商品配置</span>
          </el-menu-item>
          <el-menu-item index="/home/new">
            <el-icon><shopping-cart /></el-icon>
            <span>新品上线配置</span>
          </el-menu-item>
          <el-menu-item index="/home/recommend">
            <el-icon><pointer /></el-icon>
            <span>为你推荐配置</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>模块管理</span>
          </template>
          <el-menu-item index="/home/classification">
            <el-icon><icon-menu /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
          <el-menu-item index="/home/goods">
            <el-icon><shop /></el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="/home/vip">
            <el-icon><stamp /></el-icon>
            <span>会员管理</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><platform /></el-icon>
            <span>系统管理</span>
          </template>

          <el-menu-item index="/home/modify">
            <el-icon><unlock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, onActivated, onMounted, ref } from "vue"
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  Unlock,
  Platform,
  Shop,
  Stamp,
  Pointer,
  Picture,
  StarFilled,
  ShoppingCart,
  PictureFilled,
} from "@element-plus/icons-vue"

import { useRouter } from "vue-router"
export default defineComponent({
  components: {
    Location,
    Document,
    IconMenu,
    Setting,
    Unlock,
    Platform,
    Shop,
    Stamp,
    Pointer,
    Picture,
    StarFilled,
    ShoppingCart,
    PictureFilled,
  },
  setup() {
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log("我是open", key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    //默认选择菜单
    let defaultMenu = ref<string | null>("")

    const router = useRouter()

    router.beforeEach((to) => {
      sessionStorage.setItem("path", to.fullPath)
    })

    onMounted(() => {
      defaultMenu.value = sessionStorage.getItem("path")
        ? sessionStorage.getItem("path")
        : "/home/rotation"
    })

    return {
      handleOpen,
      handleClose,
      defaultMenu,
    }
  },
})
</script>

<style lang="less" scoped>
.el-col-12 {
  max-width: none;
  flex: none;
  width: 100%;
}

.el-sub-menu {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
